<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
    <!-- 百度禁止转码 -->
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <!-- uc强制竖屏 -->
    <meta name="screen-orientation" content="portrait" />
    <!-- QQ强制竖屏 -->
    <meta name="x5-orientation" content="portrai" />
    <!-- 禁用电话号码邮箱自动识别 -->
    <meta name="format-detection" content="telephone=no,email=no" />
    <title>document</title>
    <style>
      .cssload-box {
        position: absolute;
        width: 112px;
        height: 30px;
        left: 50%;
        margin-left: -56px;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
          justify-content: space-between;
      }

      .cssload-box .rec {
        width: 30px;
        height: 16px;
        background: url(./images/rec.png) no-repeat center;
        -webkit-background-size: contain;
        background-size: contain;
      }

      /* .cssload-box .rec:nth-child(n + 2) {
        margin-left: 10px;
      } */

      .cssload-loading .rec {
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
      }

      .cssload-loading .rec1 {
        -webkit-animation-name: cssload-loadingAnim1;
        animation-name: cssload-loadingAnim1;
      }

      .cssload-loading .rec2 {
        -webkit-animation-name: cssload-loadingAnim2;
        animation-name: cssload-loadingAnim2;
      }

      .cssload-loading .rec3 {
        -webkit-animation-name: cssload-loadingAnim3;
        animation-name: cssload-loadingAnim3;
      }

      @-webkit-keyframes cssload-loadingAnim1 {
        0% {
          opacity: 1;
        }
        10% {
          opacity: 0.8;
        }
        20% {
          opacity: 0.6;
        }
        30% {
          opacity: 0.4;
        }
        40% {
          opacity: 0.2;
        }
        50% {
          opacity: 0;
        }
        60% {
          opacity: 0.2;
        }
        70% {
          opacity: 0.4;
        }
        80% {
          opacity: 0.6;
        }
        90% {
          opacity: 0.8;
        }
        100% {
          opacity: 1;
        }
      }

      @keyframes cssload-loadingAnim1 {
        0% {
          opacity: 1;
        }
        10% {
          opacity: 0.8;
        }
        20% {
          opacity: 0.6;
        }
        30% {
          opacity: 0.4;
        }
        40% {
          opacity: 0.2;
        }
        50% {
          opacity: 0;
        }
        60% {
          opacity: 0.2;
        }
        70% {
          opacity: 0.4;
        }
        80% {
          opacity: 0.6;
        }
        90% {
          opacity: 0.8;
        }
        100% {
          opacity: 1;
        }
      }

      @-webkit-keyframes cssload-loadingAnim2 {
        0% {
          opacity: 0.6;
        }
        10% {
          opacity: 0.8;
        }
        20% {
          opacity: 1;
        }
        30% {
          opacity: 0.8;
        }
        40% {
          opacity: 0.6;
        }
        50% {
          opacity: 0.4;
        }
        60% {
          opacity: 0.2;
        }
        70% {
          opacity: 0;
        }
        80% {
          opacity: 0.2;
        }
        90% {
          opacity: 0.4;
        }
        100% {
          opacity: 0.6;
        }
      }

      @keyframes cssload-loadingAnim2 {
        0% {
          opacity: 0.6;
        }
        10% {
          opacity: 0.8;
        }
        20% {
          opacity: 1;
        }
        30% {
          opacity: 0.8;
        }
        40% {
          opacity: 0.6;
        }
        50% {
          opacity: 0.4;
        }
        60% {
          opacity: 0.2;
        }
        70% {
          opacity: 0;
        }
        80% {
          opacity: 0.2;
        }
        90% {
          opacity: 0.4;
        }
        100% {
          opacity: 0.6;
        }
      }

      @-webkit-keyframes cssload-loadingAnim3 {
        0% {
          opacity: 0.2;
        }
        10% {
          opacity: 0.4;
        }
        20% {
          opacity: 0.6;
        }
        30% {
          opacity: 0.8;
        }
        40% {
          opacity: 1;
        }
        50% {
          opacity: 0.8;
        }
        60% {
          opacity: 0.6;
        }
        70% {
          opacity: 0.4;
        }
        80% {
          opacity: 0.2;
        }
        90% {
          opacity: 0;
        }
        100% {
          opacity: 0.2;
        }
      }

      @keyframes cssload-loadingAnim3 {
        0% {
          opacity: 0.2;
        }
        10% {
          opacity: 0.4;
        }
        20% {
          opacity: 0.6;
        }
        30% {
          opacity: 0.8;
        }
        40% {
          opacity: 1;
        }
        50% {
          opacity: 0.8;
        }
        60% {
          opacity: 0.6;
        }
        70% {
          opacity: 0.4;
        }
        80% {
          opacity: 0.2;
        }
        90% {
          opacity: 0;
        }
        100% {
          opacity: 0.2;
        }
      }
    </style>
  </head>

  <body>
    <div class="cssload-box cssload-loading">
      <span class="rec rec1"></span>
      <span class="rec rec2"></span>
      <span class="rec rec3"></span>
    </div>
  </body>
</html>
